<template>
  <section style="margin: 0 auto">
    <template>
      <el-form :inline="true" label-width="80px" style="width: 1280px;margin-bottom: 10px">
        <el-form-item>
          <el-input placeholder="输入用户手机号" style="min-width: 240px;" v-model="phoneNo"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query()">查询</el-button>
        </el-form-item>
      </el-form>
    </template>
    <el-table border :data="users" style="width: 1222px">
      <el-table-column type="index" label="序列" width="100">
      </el-table-column>
      <el-table-column prop="nickName" label="账户名" width="170">
      </el-table-column>
      <el-table-column prop="createTime" label="注册时间" width="170" :formatter="dateFormat">
      </el-table-column>
      <el-table-column prop="invitation_count" label="邀请人数" width="170">
      </el-table-column>
      <el-table-column prop="signin_time" label="最后一次登录时间" width="170" :formatter="dateFormat">
      </el-table-column>
      <el-table-column prop="rewardCount" label="账户糖果发放总量" width="170">
      </el-table-column>
      <el-table-column prop="reward" label="账户糖果领取总量" width="170">
      </el-table-column>
      <el-table-column label="奖励明细" width="100">
        <template  slot-scope="scope">
          <el-button type="success" @click='compile(scope.$index,scope.row)' size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="count" >
      </el-pagination>
    </div>
  </section>
</template>
<script>
  import axios from 'axios'
  import moment from 'moment'
  export default {
    data() {
      return {
        phoneNo: '',
        users: [],
        count: 0,
        page: 0
      }
    },
    methods: {
      dateFormat: function(row, column) {
        var date = row[column.property];
        if(date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getChannel(val);
      },
      query:function(){
        var _this = this;
        _this.getChannel();
      },
      getChannel: function (index) {
        var _this = this;
        axios.get(
          '/api/userQuery', {
            method: 'GET',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            params: {
              phoneNo: this.phoneNo,
              page:index
            }
          })
          .then(res => res.data)
          .then(({rows, count}) => {
            this.users = rows;
            this.count = count

          })
          .catch(function (error) {
            console.log(error);
          });
      },
      compile:function (index,row) {
        this.$router.push({
          path: '/userParticulars',
          query: {
            uid: row.userId
          }
        })
      },
    },
    mounted(){
      this.getChannel()
    }
  }
</script>
<style>
  p{
    text-align: left;
  }
  section{
    padding-left:77px;
  }
  .el-form--inline .el-form-item__label{
    margin-top: -16px;
  }
</style>
